<template>
  <div>
    <div v-if="!confirm">
      <el-form class="main-container-main__form" label-position="right" label-width="150px" :model="form" :rules="rules"
        ref="form" :disabled="loading">
        <div class="scoreClear-userScore-wrap">
          <div>
            <h3>账户余额</h3>
            <div>
              <svg-icon icon-class="withdraw" type="primary"></svg-icon>
              <span>{{user.balance | currency}}</span>
            </div>
          </div>
          <i></i>
          <div>
            <h3>可清算会员上分</h3>
            <div>
              <svg-icon icon-class="upperScore" type="primary"></svg-icon>
              <span>{{( Math.min(creditStatus.payOutAmount, user.balance) )  | currency}}</span>
            </div>
          </div>
        </div>

        <el-row class="main-container-main__item">
          <h4>申请清算金额：</h4>
          <el-input size="medium" type="number"  v-model.number="form.amount" placeholder="请输入清算金额" autocomplete="off"></el-input>
        </el-row>

        <el-form-item vertical-fill label-width="0px">
          <el-button @click="$emit('on-close')">取消
          </el-button>
          <el-button type="primary" @click="checkFrom">确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-container-confirm" v-else>
      <div class="main-container-confirm__amount">
        &yen; {{form.amount}}
      </div>
      <!-- <div class="main-container-confirm__item">
        账户余额：{{user.balance | currency}}
      </div>
      <div class="main-container-confirm__item">
        剩余可清算：{{user.payOutAmount | currency}}
      </div> -->
      <div class="scoreClear-userScore-wrap scoreClear-userScore-wrap-end">
        <div>
          <h3>账户余额</h3>
          <div>
            <svg-icon icon-class="withdraw" type="info"></svg-icon>
            <span class="userScore-end-span">{{ ( user.balance - form.amount ) | currency}}</span>
          </div>
        </div>
        <i></i>
        <div>
          <h3>剩余可清算</h3>
          <div>
            <svg-icon type="info" icon-class="upperScore"></svg-icon>
            <span class="userScore-end-span">{{ canBeEmpty - form.amount}}</span>
          </div>
        </div>
      </div>

      <el-button type="primary" @click="sure_commit_empty">确认申请
      </el-button>
    </div>
  </div>
</template>

<script>
  import { factory, form } from '@/build';
  import { sureEmptyAmount } from '@/services/api/report';
  export default {
    name: "upper-score-clear",
    mixins: [form, factory],
    inject: ['setDialogHeader'],
    computed: {
      ...mapState({
        user: state => state.user,
      }),
      // creditStatus: state => state.creditStatus,
      creditStatus(){
        // 把对象引用地址改变一下， 不然页面不更新
        const data = {...this.$store.state.creditStatus};
        return data;
      },

    },
    data() {
      return {
        canBeEmpty : 0,
        form: {
          amount: undefined,
          proxyId: 0
        },
        rules: {
          amount: factory.getRule('money'),
        },
        confirm: false,
      };
    },
    methods: {
      compareAmount(){
        this.canBeEmpty = this.user.balance > this.creditStatus.payOutAmount ?  this.creditStatus.payOutAmount : this.user.balance;
      },
      checkFrom() {
        if(!this.form.amount){
          this.$message.warning({
            message: '请输入清算金额'
          })
          return;
        }
        if(this.form.amount< 1){
          this.$message.warning({
            message: '金额不能小于1'
          })
          return;
        }
        if(this.form.amount > this.canBeEmpty){
          this.$message.warning({
            message: `申请清算金额不能超过${_.currency(this.canBeEmpty)}`
          })
          return;
        }
        this.form.amount = parseInt(this.form.amount);
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.confirm = true;
            this.setDialogHeader('确认清算上分额度');
          }
        });
      },
      sure_commit_empty() {
        this.form.proxyId = this.user.id;
        this.form = {...this.form};
        this.doSave({
          action: 'saveForm'
        });
      }
    },

    created() {
      this.setDialogHeader('申请清算上分额度');
    },

    mounted() {
      this.compareAmount();
      this.form.proxyId = this.user.id;
      this.bindSave(sureEmptyAmount, 'saveForm', 'form', {
        successMessage: '清算会员上分成功',
        errorMessage: '清算会员上分失败',
        afterSuccess: ([result, data]) => {
          if (result) {
            this.$emit('on-success', data);
          }
        },
        afterFail: ([result, data]) => {
          this.formError = data.message;
          this.$message.error({
            message: data.message,
          });
        }
      });
    }
  };
</script>

<style lang="scss" scoped>
  @include b(main-container-confirm) {
    text-align: center;

    @include e(amount) {
      font-size: 24px;
      font-family: MicrosoftYaHei-Bold;
      font-size: 32px;
      color: #1E5ADC;
      font-weight: bold;
      text-align: left;
      margin-top: 15px;
    }
    @include e(item) {
      margin: 15px 0;
    }
    >button {
      display: block;
      width: 100%;
    }
    .el-input--medium .el-input__inner {
      height: 0.5rem;
      line-height: 0.5rem;
    }
  }
  .scoreClear-userScore-wrap {
    height: 100px;
    display: flex;
    align-items: center;
    >i {
      width: 1px;
      height: 70%;
      background: #979797;
      opacity: 0.2;
      margin: 0 30px;
    }
    >div {
      max-width: 50%;
      >h3 {
        margin: 0;
        font-size: 16px;
        color: #4A4A4A;
        padding-bottom: 10px;
        text-align: left;
      }
      >div {
        svg {
          width: 24px;
          height: 22px;
        }
        >span {
          font-family: MicrosoftYaHei-Bold;
          font-size: 20px;
          color: #4A4A4A;
          padding-left: 2px;
          font-weight: bold;
          &.userScore-end-span {
            font-size: 22px;
          }
        }
      }
    }
  }

  .main-container-main__item {
    padding: 15px 0 45px 0;

    >h4 {
      margin: 0;
      font-family: MicrosoftYaHei-Bold;
      font-size: 15px;
      color: #4A4A4A;
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .scoreClear-userScore-wrap-end {
    padding: 35px 0;
  }
</style>